<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 导入vue.js -->
    <script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>

    <div id="app">
        {{ message }} <br />
        <!-- 常规写法 -->
        <button v-on:click="showInfo1">点我</button>
        <!-- 简写 传参 可以调用多个函数-->
        <button @click="showInfo2($event,'123'),showInfo1">点我</button>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            // 绑定到元素
            el: '#app',
            data: {
                message: 'Hello Vue'
            },
            // lamada表达式中this指向
            methods: {
                showInfo1: () => {
                    console.log(this.app);
                    this.app.message = '你被我修改啦1'
                },
                showInfo2(a, b, c) {
                    alert(a);
                    console.log(a, b, c);
                    this.message = '你被我修改啦2'
                }
            }
        });

    </script>
</body>

</html>